<template>
  <div>
      <!-- 准备容器 -->
    <div ref="chart" style="width:100%;height:300px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core' //引入echarts5
import 'echarts/theme/macarons'  //图表主题

export default {
  data(){
    return {

    }
  },
  mounted(){
      this.init();
  },
  methods:{
      init(){
          //初始化
          let myChart = echarts.init(this.$refs.chart);
          let option = {
            title: {
                text: 'Nightingale Chart',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: [
                'rose1',
                'rose2',
                'rose3',
                'rose4',
                'rose5',
                'rose6',
                'rose7',
                'rose8'
                ]
            },
            toolbox: {
                show: true,
                feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
                }
            },
            series: [
                {
                name: 'Area Mode',
                type: 'pie',
                radius: [10, 80],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    { value: 30, name: 'rose 1' },
                    { value: 28, name: 'rose 2' },
                    { value: 26, name: 'rose 3' },
                    { value: 24, name: 'rose 4' },
                    { value: 22, name: 'rose 5' },
                    { value: 20, name: 'rose 6' },
                    { value: 18, name: 'rose 7' },
                    { value: 16, name: 'rose 8' }
                ]
                }
            ]
            };
          //设置渲染
          myChart.setOption(option);
      }
  }
}
</script>


